Закругление уголков без использования изображений |
Статьи - PHP программирование |
Пример функций php, которые рисуют блоки с закругленными уголками радиуса 10 и 5 пикселей. <?php
function showblock10( $html = '', $bgcolor = '#ddd', $width = 'auto', $height = 'auto' ) { $radius = 10; $id = 's'.rand(0,9999).time(); echo '<style type="text/css"> '; for($i=1;$i<=$radius;$i++) {echo '.'.$id.'r'.$i; if($i!=$radius) echo ', ';} echo ' { display: block; height: 1px; overflow: hidden; font-size:1px; } '; for($i=1;$i<=$radius;$i++){ echo '.'.$id.'r'.$i.' { margin: 0 '.$i.'px; } '; } echo ' #'.$id.'rounded-box-3 .'.$id.'inner-box, #'.$id.'rounded-box-3 b { background-color: '.$bgcolor.'; } .'.$id.'inner-box { padding:1em; } </style> '; echo ' <div id="'.$id.'rounded-box-3"> <b class="'.$id.'r10"></b> <b class="'.$id.'r7"></b> <b class="'.$id.'r5"></b> <b class="'.$id.'r4"></b> <b class="'.$id.'r3"></b> <b class="'.$id.'r2"></b> <b class="'.$id.'r2"></b> <b class="'.$id.'r1"></b> <b class="'.$id.'r1"></b> <b class="'.$id.'r1"></b> <div class="'.$id.'inner-box"> '.$html.' </div> <b class="'.$id.'r1"></b> <b class="'.$id.'r1"></b> <b class="'.$id.'r1"></b> <b class="'.$id.'r2"></b> <b class="'.$id.'r2"></b> <b class="'.$id.'r3"></b> <b class="'.$id.'r4"></b> <b class="'.$id.'r5"></b> <b class="'.$id.'r7"></b> <b class="'.$id.'r10"></b> </div> '; return; } function showblock5( $html = '', $bgcolor = '#ddd', $width = 'auto', $height = 'auto' ) { $radius = 5; $id = 's'.rand(0,9999).time(); echo '<style type="text/css"> '; for($i=1;$i<=$radius;$i++) {echo '.'.$id.'r'.$i; if($i!=$radius) echo ', ';} echo ' { display: block; height: 1px; overflow: hidden; font-size:1px; } '; for($i=1;$i<=$radius;$i++){ echo '.'.$id.'r'.$i.' { margin: 0 '.$i.'px; } '; } echo ' #'.$id.'rounded-box-3 .'.$id.'inner-box, #'.$id.'rounded-box-3 b { background-color: '.$bgcolor.'; } .'.$id.'inner-box { padding:1em; } </style> '; echo ' <div id="'.$id.'rounded-box-3"> <b class="'.$id.'r5"></b> <b class="'.$id.'r3"></b> <b class="'.$id.'r2"></b> <b class="'.$id.'r1"></b> <b class="'.$id.'r1"></b> <div class="'.$id.'inner-box"> '.$html.' </div> <b class="'.$id.'r1"></b> <b class="'.$id.'r1"></b> <b class="'.$id.'r2"></b> <b class="'.$id.'r3"></b> <b class="'.$id.'r5"></b> </div> '; return; } showblock10('111111', 'red'); echo '<br/>'; showblock5('111111', 'green'); ?> |